import { useState } from "react";

function Test() {
  // [true, false] React会按照顺序来确定每个state对应的是哪个hook
  /**
   * hooks必须在组件的最顶层调用，不能在循环、条件、嵌套函数中使用hooks
   * React 会根据存储的顺序来确定每个 state 对应的是哪个 Hook
   */
  const [isVisible, setIsVisible] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [person, setPerson] = useState({
    firstName: "Bruce",
    lastName: "Wayne",
  });
  const handleClick = () => {
    setIsVisible(!isVisible);
    console.log("isVisible 为 " + isVisible);
    // 这里的 isVisible 是上一次的值
    /**
     * React 的状态更新是批处理的，特别是在事件处理函数中。
     * 这意味着在该事件处理函数完成执行后，React 会一次性应用所有状态更改。这是为了优化性能。
     * 因此，在 handkeClick 函数内部，isVisible 的值还没有更新。
     */
  };

  return (
    <div>
      <button onClick={handleClick}>
        {person.firstName} {person.lastName}
      </button>
    </div>
  );
}

export default Test;
